<template>
    <div class="news-list">
      <div class="news-item" v-for="_new in news" :key="_new.newid">
        <img :src="_new.imageName" :alt="_new.title" />
        <div class="news-content">
          <h4>{{ _new.title }}</h4>
          <p>{{ _new.content }}</p>
          <a href="new.link">阅读全文</a>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref, onMounted, } from 'vue';
import axios from 'axios'

// 定义响应式数据
const news = ref([])
const errorMessage = ref('')
const type = ref(2)
const fetchNews = async () => {
  try {
    const response = await axios.get(`http://localhost:3001/TypeNews?typeid=${type.value}`)
    news.value = response.data
    errorMessage.value = ''  // 清空错误信息
  } catch (error) {
    console.error('获取数据时发生错误:', error)
    errorMessage.value = '加载数据失败，请稍后再试。'
  }
}
onMounted(fetchNews)
</script>

<style scoped>
.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
}

.news-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #fff;
}

.news-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.news-content {
  padding: 15px;
}

.news-content h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
}

.news-content p {
  margin: 0 0 15px;
  font-size: 14px;
  color: #666;
}

.news-content a {
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
}

.news-content a:hover {
  text-decoration: underline;
}
</style>